<template>
    <div class="list" ref="wrapper">
      <div>
      <div class="area">
        <div class="title border-topbottom">当前城市</div>
        <div class="buttom-list">
          <div class="buttom-wrapper">
              <div class="buttom">{{this.currentCity}}</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="buttom-list">
          <div
            class="buttom-wrapper"
            v-for="item of hotCities"
            :key="item.id"
            @click="handleCityClick(item.name)"
          >
          <div class="buttom">{{item.name}}</div>
        </div>
        </div>
      </div>
      <div class="area"
           v-for="(item,key) of cities"
           :key="key"
           :ref="key"
      >
        <div class="title border-topbottom">{{key}}</div>
        <div class="item-list">
           <div
            class="item border-bottom"
            v-for="innerItem of item"
            :key="innerItem.id"
            @click="handleCityClick(innerItem.name)"
           >
            {{innerItem.name}}
          </div>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
import {mapState, mapMutations} from 'vuex'
export default {
  name: 'CityList',
  props: {
    hotCities: Array,
    cities: Object,
    letter: String
  },
  computed: {
    // mapState意思是把vuex中的数据映射到该组件的计算属性里
    // 这里把vuex里面的city这个数据映射到名为Currentcity的计算属性中
    ...mapState({
      currentCity: 'city'
    })
  },
  methods: {
    handleCityClick (city) {
      this.changeCity(city)
      this.$router.push('/')
    },
    // 意思是有一个mutation叫changeCity，映射到了一个叫changeCity的方法里
    ...mapMutations(['changeCity'])
  },
  // 数据发生变化，页面实时更新
  updated () {
    this.scroll.refresh()
  },
  // 页面挂在完毕后执行
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper, {
      click: true
    })
  },
  watch: {
    letter () {
      if (this.letter) {
        // 默认this.$refs[this.letter]获取的是数组，我们想要获取元素，末尾加[0]
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .border-topbottom
     &:before
        border-color :#ccc
     &:after
        border-color :#ccc
   .border-bottom
     &:before
       border-color :#ccc
  .list
    overflow :hidden
    position :absolute
    top:1.58rem
    left :0
    right:0
    bottom:0
  .title
    line-height :.54rem
    background :#eee
    padding-left :.2rem
    color :#666
    font-size :.26rem
   .buttom-list
      padding :.1rem .6rem .1rem .1rem
      overflow :hidden
      .buttom-wrapper
         width :33.33%
         float :left
        .buttom
           margin :.1rem
           padding :.1rem 0
           text-align :center
           border :.02rem solid #ccc
           border-radius :.06rem
    .item-list
       .item
           line-height :.76rem
           color :#666
           padding-left: .2rem
</style>
